<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="iconList" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in iconList" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<!-- <image :src="item.image" mode="aspectFill" :draggable="false" /> -->
						<view :class="[item.icon, 'colorcolor','iconfont']" style="font-size: 200rpx;"></view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<view class="" v-for="(item,index) in gongGeList" :index="index">
			<uni-section :title="item.title" :sub-title="item.subtitle" type="line"></uni-section>
			<view class="grid-body">
				<uni-grid :column="4" :showBorder="false" @change="(e) => changeGrid(e, index)">
					<uni-grid-item v-for="(item2,index2) in item.contentTitle" :index="index2">
						<view class="grid-item-box">

							<!-- transform: scale(1.5); /* 将图标放大到原始大小的1.5倍 */ -->
							<view :class="[item2.icon, item2.color, 'iconfont']" style="font-size: 56rpx;"></view>
							<!-- <uni-icons :type="item2.typeIcons" :color="item2.color" size="30"></uni-icons> -->
							<text class="text">{{item2.content}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				iconList: [{
						icon: 'icon-maimeng',
						color: '#ffee6f'
					},
					{
						icon: 'icon-shengqi',
						color: '#e5a84b'
					},
					{
						icon: 'icon-zhayan',
						color: '#fedc5e'
					},
					{
						icon: 'icon-nu',
						color: '#ea5514'
					},
					{
						icon: 'icon-mogui',
						color: '#bd8253'
					},
					{
						icon: 'icon-chijing',
						color: '#ed6d3d'
					},

				],
				data: [{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045057_thumb.jpg'
					},
					{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045108_thumb.jpg'
					},
					{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679045190_thumb.jpg'
					},
					{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044643_thumb.jpg'
					},
					{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044936_thumb.jpg'
					},
					{
						image: 'https://www.logosc.cn/uploads/resources/2023/03/17/1679044716_thumb.jpg'
					}
				],
				gongGeList: [{
						title: "小程序",
						subtitle: '添加其他相关联小程序',
						contentTitle: [{
								content: "虚位以待",
								color: 'text-mauve',
								icon: 'icon-huangguan',
								contentUrl: ''
							},
							{
								content: "招兵买马",
								color: 'text-pink',
								icon: 'icon-zuanshi',
								contentUrl: ''
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]

					},
					{
						title: "计算器",
						subtitle: '不同的计算器',
						contentTitle: [{
								content: "简易计算器",
								color: 'text-red',
								icon: 'icon-jia',
								contentUrl: 'work/calculator/simpleCalculator'
							},
							{
								content: "体脂计算机器",
								color: 'text-orange',
								icon: 'icon-jian',
								contentUrl: 'work/calculator/bodyFat'
							},
							{
								content: "人生进度条",
								color: 'text-yellow',
								icon: 'icon-cuowu1',
								contentUrl: 'work/calculator/life_progress_bar'
							},
							{
								content: "油耗计算器",
								color: 'text-olive',
								icon: 'icon-shuaxin',
								contentUrl: 'work/calculator/fuel-calculator'
							},
							{
								content: "体重计算器",
								color: 'text-green',
								icon: 'icon-bangzhu',
								contentUrl: 'work/calculator/weightCalculator'
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]
					},
					{
						title: "简易日历",
						subtitle: '日历',
						contentTitle: [{
								content: "简易日历",
								color: 'text-red',
								icon: 'icon-rili',
								contentUrl: 'work/calendar/simpleCalendar'
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]

					},
					{
						title: "天气预报",
						subtitle: '不同的天气预报',
						contentTitle: [{
								content: "天气预报",
								color: 'text-red',
								icon: 'icon-yun',
								contentUrl: ''
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]

					},
					{
						title: "手写签名模块",
						subtitle: '签名',
						contentTitle: [{
								content: "手写签名",
								color: 'text-red',
								icon: 'icon-bianjiwenjian',
								contentUrl: 'work/sign/sign001'
							},
							{
								content: "手写签名2",
								color: 'text-orange',
								icon: 'icon-bianji2',
								contentUrl: ''
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]

					},
					{
						title: "css模块",
						subtitle: '动画css',
						contentTitle: [{
								content: "按钮",
								color: 'text-red',
								icon: 'icon-css',
								contentUrl: ''
							},
							{
								content: "闪电按钮",
								color: 'text-orange',
								icon: 'icon-css',
								contentUrl: ''
							},
							{
								content: "其他",
								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]

					},
					{
						title: "案例展示模块",
						subtitle: '前端一些功能性的小项目展示。',
						contentTitle: [{
								content: "瀑布流",
								color: 'text-red',
								icon: 'icon-shuipingzuo',
								contentUrl: 'work/jsCss/waterFallFlow'
							},
							{
								content: "瀑布流2",
								color: 'text-orange',
								icon: 'icon-shuangyuzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "防抖",
								color: 'text-yellow',
								icon: 'icon-mojiezuo',
								// contentUrl: 'work/jsCss/simpleCalculatortwo'
								contentUrl: ''
							},
							{
								content: "节流",
								color: 'text-olive',
								icon: 'icon-chunvzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "手持弹幕",
								color: 'text-green',
								icon: 'icon-shizizuo',
								contentUrl: 'work/jsCss/handDold'
							},
							{
								content: "节流3",

								color: 'text-blue',
								icon: 'icon-juxiezuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流4",

								color: 'text-purple',
								icon: 'icon-tianhezuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流5",

								color: 'text-mauve',
								icon: 'icon-sheshouzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流6",

								color: 'text-pink',
								icon: 'icon-tianchengzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流7",

								color: 'text-brown',
								icon: 'icon-shuangzizuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流8",

								color: 'text-grey',
								icon: 'icon-jinniuzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							}, {
								content: "节流9",

								color: 'text-gray',
								icon: 'icon-muyangzuo',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流10",

								color: 'text-black',
								icon: 'icon-chongwu',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流11",

								color: 'text-scarlet',
								icon: 'icon-gaoxiaoquwei',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流12",

								color: 'text-guangmingsha',
								icon: 'icon-meishi',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流13",

								color: 'text-chou-heung',
								icon: 'icon-qinggan',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "节流14",

								color: 'text-xuantian',
								icon: 'icon-liangzitongji',
								// contentUrl: 'work/jsCss/waterFallFlow2'
								contentUrl: ''
							},
							{
								content: "其他",

								color: 'text-black',
								icon: 'icon-qita',
								contentUrl: ''
							}
						]
					}
				]
			}
		},
		methods: {
			clickBannerItem(item) {
				console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			changeGrid(e, sectionIndex) {
				const itemIndex = e.detail.index; // 获取内层点击索引:ml-citation{ref="4" data="citationList"}
				const target = this.gongGeList[sectionIndex].contentTitle[itemIndex];
				if (target.contentUrl) {
					uni.navigateTo({
						url: `/pages/${target.contentUrl}`
					})
				} else {
					if (sectionIndex == 0) {
						uni.showToast({
							title: '期待您的加入！'
						}) // 空路径处理
					} else {
						uni.showToast({
							title: '模块建设中'
						}) // 空路径处理
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-container {
		padding: 0 40rpx;

	}

	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	.colorcolor {
		color: #5976ba;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>